<%--
  Created by IntelliJ IDEA.
  User: zkt
  Date: 2023/11/1
  Time: 10:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="./css/bootstrap.min.css">
        <link rel="stylesheet" href="./css/course.css">
        <script src="js/jquery-3.7.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>

        <title>课程</title>
    </head>
    <body>
        <div class="box">
            <div class="container">
                <h1 class="name">${course.getName()}</h1>
                <h4 class="title">${course.getTitle()}</h4>
                <div class="mai">
                    <div class="left">
                        <div class="text">难度：<span
                                class="red">${course.getDifficulty()}</span>&nbsp;|&nbsp;时长：共&nbsp;<span
                                class="red">${course.getTime()}</span>&nbsp;小时
                        </div>
                        <div class="price">￥${course.getPrice()}</div>
                    </div>
                    <div class="right">
                        <button class="btn btn-left" onclick="showPopup()">立即购买</button>
                        <button class="btn btn-right" data-toggle="modal" data-target="#myModal" data-backdrop="false"
                                onclick="addShop()">加购物车
                        </button>
                    </div>
                </div>
                <div class="introduce">
                    <div class="header">课程简介</div>
                    <div class="body">${course.getText()}</div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">
                            加入购物车成功
                        </h4>
                        <div class="modal-btn">
                            <a type="button" class="btn btn-foot btn-foot-left" data-dismiss="modal">
                                继续逛逛
                            </a>
                            <a type="button" href="/list" class="btn btn-foot btn-foot-right">
                                去购物车结算
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        $(function () {
            $('#myModal').modal('hide')
        });

        function addShop() {
            $.ajax({
                url: "/addShop"
            })
        }

        function showPopup() {
            var xhr1 = new XMLHttpRequest();
            xhr1.open("GET", "/buyOne", true);
            xhr1.send();
            var choise = window.confirm("您是否要支付？");
            if (choise) {
                var xhr2 = new XMLHttpRequest();
                xhr2.open("POST", "/updateStatus", true);
                xhr2.onreadystatechange = function () {
                    setTimeout(function () {
                        if (xhr2.readyState === 4 && xhr2.status === 200) {
                            alert("支付成功");
                        } else {
                            alert("支付失败")
                        }
                    }, 500);
                };
                xhr2.send();
            }
        }
    </script>
</html>